<template>
<!-- 小时工申请加时 -->
  <div>
    <p v-if="isDisabled" class="text-remind text-center">服务时间最晚到20：00，目前已无法继续加时。</p>
    <div class="apply-add-time card-shadow">
      <PopLayer
        animation=""
        :pdata="serviceDurationData"
        :visible="true"
        @change="selectTimeChange"
      />
    </div>
    <div class="btn-full-box">
      <div :class="['btn-full', isDisabled ? 'disabled' : '']" @tap="submit">确定加时</div>
    </div>
  </div>
</template>
<script>
import PopLayer from '@/components/PopLayer/index'
import getOrderDetail from '@/interface/order/getOrderDetail'
import dateUtil from '@/utils/dateUtil'
import saveOrder from '@/interface/order/saveOrder'
import updateOrder from '@/interface/order/updateOrder'
import payFun from '@/utils/pay'

export default {
  components: { PopLayer },
  data () {
    return {
      isSubmit: false,
      isDisabled: false,
      serviceDurationData: {
        title: '请选择服务时长',
        transparent: true,
        range: [
          { time: 2, money: '', checked: false, disabled: false },
          { time: 2.5, money: '', checked: false, disabled: false },
          { time: 3, money: '', checked: false, disabled: false },
          { time: 3.5, money: '', checked: false, disabled: false },
          { time: 4, money: '', checked: false, disabled: false },
          { time: 4.5, money: '', checked: false, disabled: false }
        ],
        serviceStartTime: '',
        order: {}
      }
    }
  },
  computed: {
    serviceDuration () {
      const item = this.serviceDurationData.range.find(v => v.checked)
      return item ? item.time : ''
    }
  },
  watch: {

  },
  methods: {
    updateAddTimeSatus () {
      updateOrder({
        id: this.order.id,
        overtimeStatus: 1
      }).then(v => {

      }).catch(msg => this.dialog.showToast(msg || '操作失败'))
    },
    getTimeData (date, time, price) {
      const timeArr = date.split(' ')[1].split(':')
      const hour = timeArr[1] === '30' ? Number(timeArr[0]) + 0.5 : Number(timeArr[0])
      // 晚上20点后不能预约
      const timeLength = 20 - hour - time
      const arr = [...this.serviceDurationData.range]
      arr.map(v => {
        v.money = v.time * price
        if (v.time > timeLength) {
          v.disabled = true
          v.checked = false
        } else {
          v.disabled = false
        }
        return v
      })
      if (arr.every(v => v.disabled)) {
        this.isDisabled = true
      }
      this.serviceDurationData.range = arr
    },
    selectTimeChange (index) {
      this.serviceDurationData.range = this.serviceDurationData.range.map((v, i) => {
        v.checked = i === index
        return v
      })
    },
    submit () {
      if(this.isDisabled){
        return;
      }
      if (!this.serviceDuration) {
        this.dialog.showToast('请选择服务时长')
      }
      const serviceDate = dateUtil.addHours(new Date(this.order.serviceDate.replace(/-/g, '/')), Number(this.order.serviceDuration) || 0)
      this.isSubmit = true
      saveOrder({
        serviceType: 'xsg',
        serviceDate: dateUtil.format(serviceDate, 'yyyy-MM-dd HH:mm'),
        addressId: this.order.addressId,
        orderNo: this.order.orderNo,
        subOrderNo: this.order.subOrderNo || '',
        servicePrice: this.order.servicePrice,
        serviceDuration: this.serviceDuration,
        orderPrice: this.order.servicePrice * this.serviceDuration,
      }).then(data => {
        this.updateAddTimeSatus();
        payFun({
          orderNo: data.orderNo,
          subOrderNo: data.subOrderNo
        }, () => {
          const orderStatus = 1;
          this.goStatusPage('success', '支付', orderStatus)
        }, () => {
          const orderStatus = 0;
          this.goStatusPage('error', '支付', orderStatus)
        })
      }).catch(msg => this.dialog.showToast(msg || '操作失败'))
        .finally(() => { this.isSubmit = false })
    }
  },
  beforeMount () {
    this.checkLogin()
  },
  mounted () {
    const { id } = this.$root.$mp.query
    getOrderDetail({id}).then(v => {
      v.serviceDuration = v.serviceDuration || 4
      v.servicePrice = v.servicePrice || 100

      this.order = v
      this.getTimeData(v.serviceDate, v.serviceDuration, v.servicePrice)
    })
  }
}
</script>
<style lang="less">
page {
  background-color: #f9f9f9;
}
.text-remind {
  padding: 10upx 0;
}
.apply-add-time {
  padding: 0 30upx;
  height: 512upx;
  background: #fff;
  margin-bottom: 490upx;
}
.apply-add-time .dialog {
  position: relative;
}
.apply-add-time .dialog .dialog-box .dialog-title {
  padding-left: 0;
}
.apply-add-time .dialog .dialog-box .dialog-title div {
  text-align: left;
  font-size: 32upx;
  color: #000;
}
.apply-add-time .dialog .dialog-box .dialog-close {
  display: none;
}
.apply-add-time .dialog .dialog-box .weui-grids {
  padding-left: 10upx;
  padding-right: 10upx;
  border-left: none !important;
}

</style>